<template>
  <div class="houseList vux-1px">
    <div class="imgbox">
      <img v-lazy="item.IndexImagePath" alt="">
      <div class="flex-grow-0 price flex-y-center">￥ {{item.totalPrice}}万</div>
    </div>
    <div class="item-info">
      <p class="name">{{item.Community}}</p>
      <p class="desc">{{item.jifang}} / {{item.AreaStr}}㎡</p>
      <p class="desc2">{{item.zhungxiu_type}} / {{item.dan_price}}元/㎡</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HouseTwoRowList",
    props: {
      item: {
        type: Object,
        default: {}
      }
    },
  }
</script>

<style lang="less" scoped>
  .houseList {
    width: 3.48rem;
    margin-bottom: .18rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    .imgbox {
      position: relative;
      width: 3.48rem;
      height: 2.61rem;
      overflow: hidden;
      > img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .price {
        background: rgba(0, 0, 0, .5);
        position: absolute;
        left: 0;
        bottom: .25rem;
        padding: 0 0.12rem;
        color: #fff;
        height: .45rem;
        font-size: .26rem;
        border-radius: 0 5px 5px 0;
      }
    }
    .name {
      font-size: 0.28rem;
      font-weight: 700;
      color: #333;
    }
    .item-info {
      padding: 6px 8px;
    }
    .desc, .desc2 {
      font-size: .24rem;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

</style>